<template>
	<view>
		<VideoBox>
			<template #content>
				<view class="outBox">
					<u-navbar leftText="拼卡人员" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
						<view class="left-slot" slot="left">
							<u-icon name="arrow-left" color="#fff"></u-icon>
							<text>{{ '拼卡人员' }}</text>
						</view>
					</u-navbar>
					<view class="content">
						<view class="pic2">
							<image :src="getImgUrl('cardCombination/pic7.png')" mode=""></image>
						</view>
						<view class="numberBtn">
							台号{{diaData.counterNo}}
						</view>
						<view class="check" @click="handleSelect">
							信息查询
						</view>
						<scroll-view :scroll-x="true" class="topBtn">
							<view class="btns2">
								<view :class="[activeBtn === 0 ? 'btnOut' : '']">
									<view class="btn" @click="getData(0)">
										<text>全部</text>
									</view>
								</view>
								<view :class="[activeBtn === 1 ? 'btnOut' : '']">
									<view class="btn" @click="getData(1)">
										<text>拼卡申请</text>
									</view>
								</view>
								<view :class="[activeBtn === 2 ? 'btnOut' : '']">
									<view class="btn" @click="getData(2)">
										<text>审核通过</text>
									</view>
								</view>
								<view :class="[activeBtn === 3 ? 'btnOut' : '']">
									<view class="btn" @click="getData(3)">
										<text>已支付</text>
									</view>
								</view>
								<view :class="[activeBtn === 4 ? 'btnOut' : '']">
									<view class="btn" @click="getData(4)">
										<text>已入场</text>
									</view>
								</view>
								<view :class="[activeBtn === 5 ? 'btnOut' : '']">
									<view class="btn" @click="getData(5)">
										<text>已离场</text>
									</view>
								</view>
							</view>
						</scroll-view>

						<view class="users">
							<view class="user">
								<image :src="userInfo.avatar" mode="aspectFill"></image>
								<view class="state color1">
									<text>发起人</text>
								</view>
								<div class="name">{{userInfo.nickName}}</div>
							</view>
							<view class="user" v-for="item in userList" @click="handleUser(item)">
								<image :src="item.avatar" mode="aspectFill"></image>
								<view class="state" v-if="item.auditStatus === 1"
									:class="formatText(item.paymentStatus,item.isEnter).color">
									<text>{{formatText(item.paymentStatus,item.isEnter).text}}</text>
								</view>
								<view class="state" v-else :class="formatText2(item.auditStatus).color">
									<text>{{formatText2(item.auditStatus).text}}</text>
								</view>
								<div class="name">{{item.customerName}}</div>
							</view>
						</view>

						<div class="btns">
							<view class="btnOut btnOut4" v-if="shareAuditStatus != 3">
								<view class="btn" @click="showDia5()">
									<text>解散拼卡</text>
								</view>
							</view>
						</div>
					</view>
				</view>
				<view class="changeColor">
					<diaBox ref="diaBoxRef1">
						<template v-slot:dia-cont>
							<view class="pic pic3">
								<image :src="getImgUrl('cardCombination/pic10.png')" mode=""></image>
							</view>
							<div class="bgCont bgCont2">
								<div class="user-info">
									<span class="username">{{curItem.customerName}}</span>
									<span class="gender-icon male" v-if="curItem.sex == 0">
										<image src="/static/mine/cardCombination/man.png" mode="widthFix"></image>
									</span>
									<span class="gender-icon female" v-else>
										<image src="/static/mine/cardCombination/woman.png" mode="widthFix"></image>
									</span>
								</div>
								<view class="text-box">
									<div class="row row1">
										<div class="info-row">
											<label>支付门票金额：</label><span
												style="color: #fff;">{{curItem.actualPayAmount || 0}}元</span>
										</div>
										<div class="info-row">
											<label>审核状态：</label><span class="status pending" :style="{
												'color': curItem.auditStatus == 1 ? '#35f500' : '#e99942'
											}">{{curItem.auditStatus == 1 ? '已通过' : '待审核'}}</span>
										</div>
									</div>
									<div class="row row1">
										<div class="info-row">
											<label>支付状态：</label><span class=" status unpaid" :style="{
											'color': curItem.paymentStatus == 1 ? '#e99942' : '#5990f5'
										}">{{curItem.paymentStatus == 1 ? '已支付' : '未支付'}}</span>
										</div>
										<div class="info-row">
											<label>入场状态：</label><span class="status not-enter" :style="{
											'color': curItem.paymentStatus == 1 ? '#35f500' : '#8e71f6'
										}">{{curItem.isEnter == 0 ? '未入场' : curItem.isEnter == 1 ? '已入场' : '已离场'}}</span>
										</div>
									</div>
									<div class="row">
										<div class="info-row">
											<label>性别：</label><span class=" status unpaid" :style="{
												'color': curItem.sex == 0 ? '#e99942' : '#5990f5'
											}">{{curItem.sex == 0 ? '男生' : '女生'}}</span>
										</div>
										<div class="info-row">
											<label>邀请人：</label><span :style="{
												'color': '#5990f5'
											}">{{curItem.shareCustomerName || '-'}}</span>
										</div>
									</div>

								</view>
								<view class="btns" v-if="curItem.auditStatus == 0">
									<view class="btnOut">
										<view class="btn" @click="comfireFunc(2)">
											<text>审核拒绝</text>
										</view>
									</view>
									<view class="btnOut btnOut2">
										<view class="btn" @click="comfireFunc(1)">
											<text>审核同意</text>
										</view>
									</view>
								</view>
								<view class="btns" v-if="curItem.auditStatus == 1">
									<view class="btnOut btnOut2"
										v-if="curItem.auditStatus == 1 && curItem.isEnter == 0">
										<view class="btn" @click="comfireFunc3(1)">
											<text>踢出成员</text>
										</view>
									</view>
									<view class="btnOut btnOut2"
										v-if="curItem.auditStatus == 1 && curItem.isEnter == 1">
										<view class="btn" @click="comfireFunc2(1)">
											<text>标记离场</text>
										</view>
									</view>
								</view>
							</div>
						</template>
						<template v-slot:dia-btns>

						</template>
					</diaBox>

				</view>
				<diaBox ref="diaBoxRef" title="审核拼卡" content="是否同意该成员加入拼卡？">
					<template v-slot:dia-btns>
						<view class="btns">
							<view class="btnOut">
								<view class="btn" @click="comfireFunc(2)">
									<text>拒绝</text>
								</view>
							</view>
							<view class="btnOut btnOut2">
								<view class="btn" @click="comfireFunc(1)">
									<text>踢出成员</text>
								</view>
							</view>
						</view>
					</template>
				</diaBox>
				<diaBox ref="diaBoxRef2" title="离场标记" content="是否标记改成员离场？">
					<template v-slot:dia-btns>
						<view class="btns">
							<view class="btnOut">
								<view class="btn" @click="comfireFunc2(false)">
									<text>否</text>
								</view>
							</view>
							<view class="btnOut btnOut2">
								<view class="btn" @click="comfireFunc2(true)">
									<text>是</text>
								</view>
							</view>
						</view>
					</template>
				</diaBox>

				<diaBox ref="diaBoxRef3" title="踢出成员" content="是否确认踢出该成员？">
					<template v-slot:dia-btns>
						<view class="btns">
							<view class="btnOut">
								<view class="btn" @click="comfireFunc3(false)">
									<text>否</text>
								</view>
							</view>
							<view class="btnOut btnOut2">
								<view class="btn" @click="comfireFunc3(true)">
									<text>是</text>
								</view>
							</view>
						</view>
					</template>
				</diaBox>

				<!-- 查看详情 -->
				<view class="changeColor">
					<diaBox ref="diaBoxRef4" :show-btns="false">
						<template v-slot:dia-cont>
							<view class="pic">
								<image :src="getImgUrl('cardCombination/pic8.png')" mode=""></image>
							</view>
							<view class="bgCont">
								<div class="user-info">
									<div class="tag">
										台号
									</div>
									<span class="username">{{diaData.counterNo}}</span>
								</div>
								<view class="text-box">
									<div class="row row1">
										<div class="info-row">
											<label>发起人：</label><span
												class="status pending">{{diaData.createUser}}</span>
										</div>
										<div class="info-row">
											<label>申请：</label><span class="status pending">{{diaData.applyNum}}人</span>
										</div>
									</div>
									<div class="row row1">
										<div class="info-row">
											<label>审核通过：</label><span class="status pending">{{diaData.passNum}}人</span>
										</div>
										<div class="info-row">
											<label>已支付(未核销)：</label><span
												class="status pending">{{diaData.payNum}}人</span>
										</div>
									</div>
									<div class="row row1">
										<div class="info-row">
											<label>已到店核销：</label><span
												class="status pending">{{diaData.verifyNum}}人</span>
										</div>
										<div class="info-row">
											<label>已离店：</label><span class="status pending">{{diaData.leaveNum}}人</span>
										</div>
									</div>
								</view>
								<div class="row row2">
									<div class="info-row">
										<label>当前门票总额：</label><span class="status pending">{{diaData.totalTicketPrice}}
											元</span>
									</div>
								</div>

							</view>
						</template>
					</diaBox>

				</view>
				<diaBox ref="diaBoxRef5" title="解散拼卡" content="是否确认解散拼卡？" :show-btns="true"
					@comfireFunc="handleDismissShare"></diaBox>
			</template>
		</VideoBox>
	</view>
</template>

<script>
	import VideoBox from "@/components/VideoBox/index.vue";
	import {
		getImgUrl,
		getImgUrlLocal,
		getWXStatusHeight
	} from "@/utils";
	import {
		getOrderParticipateShareCounterApi,
		auditShareApi,
		outPartyApi,
		joinMyPkListApi,
		kickUserApi,
		dismissShareApi,
		getPinKaDetail2Api
	} from "@/api/api";
	import diaBox from "@/components/diaBox/index.vue"

	export default {
		components: {
			VideoBox,
			diaBox
		},
		onLoad(e) {
			let obj = getWXStatusHeight()
			this.menuHeight = obj.menuHeight

			this.userInfo = uni.getStorageSync('userInfo')
			this.id = e.id
			console.log(e, "ee");
			this.shareAuditStatus = e.shareAuditStatus
			this.getData()
			this.getBaseInfo()
		},
		data() {
			return {
				menuHeight: 0,
				videoUrl: this.$videoUrl,
				userInfo: {},
				dataObj: {},
				curItem: {}, // 选择的用户
				id: '',
				userList: [], // 参与拼卡的用户
				totalPrice: 0, // 门票总销售额
				diaData: {},
				shareAuditStatus: 1,
				activeBtn: 0,
			}
		},
		methods: {
			getImgUrl,
			getImgUrlLocal,
			async getBaseInfo() {
				const res = await getPinKaDetail2Api(this.id)
				if (res.code == 200) {
					this.diaData = res.data
				}
			},
			showDia5() {
				this.$refs.diaBoxRef5.show = true
			},
			// 解散
			async handleDismissShare() {
				const data = {
					id: this.id
				}
				const res = await dismissShareApi(data)
				if (res.code == 200) {
					uni.showToast({
						title: '解散成功'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
			},
			async handleSelect() {
				const res = await getPinKaDetail2Api(this.id)
				if (res.code == 200) {
					this.$refs.diaBoxRef4.show = true
					this.diaData = res.data
				}
			},
			formatText(paymentStatus, isEnter) {
				console.log(paymentStatus, isEnter, "paymentStatus, isEnter");
				if (paymentStatus == 0) {
					return {
						color: 'color1',
						text: '未付款'
					}
				} else if (paymentStatus == 1 && isEnter == 0) {
					return {
						color: 'color2',
						text: '未入场'
					}
				} else if (paymentStatus == 1 && isEnter == 1) {
					return {
						color: 'color6',
						text: '已入场'
					}
				} else if (paymentStatus == 1 && isEnter == 2) {
					return {
						color: 'color7',
						text: '已离场'
					}
				} else if (paymentStatus == 2) {
					return {
						color: 'color5',
						text: '支付超时'
					}
				}
			},
			formatText2(auditStatus) {
				switch (auditStatus) {
					case 0:
						return {
							color: 'color1',
								text: '待审核'
						}
					case 1:
						return {
							color: 'color2',
								text: '通过'
						}
					case 2:
						return {
							color: 'color5',
								text: '已拒绝'
						}
					case 3:
						return {
							color: 'color3',
								text: '已踢出'
						}
					default:
						return {
							color: 'color3',
								text: '拒绝'
						}
				}
			},
			async comfireFunc2(val) {
				if (val) {
					const res = await outPartyApi(this.curItem.id)
					if (res.code == 200) {
						uni.showToast({
							title: "离场成功"
						})
						this.getData()
					}
				}
				this.$refs.diaBoxRef1.show = false
			},
			async comfireFunc3(val) {
				if (val) {
					const data = {
						id: this.curItem.id
					}
					const res = await kickUserApi(data)
					if (res.code == 200) {
						uni.showToast({
							title: "踢出成功"
						})
						this.getData()
					}
				}
				this.$refs.diaBoxRef1.show = false
			},
			// 同意审核
			async comfireFunc(state) {
				const data = {
					"id": this.curItem.id,
					"auditStatus": state
				}
				const res = await auditShareApi(data)
				if (res.code == 200) {
					uni.$u.toast("操作成功")
					await this.getData()
					this.$refs.diaBoxRef1.show = false
				}
			},
			// 点击用户
			handleUser(item) {
				console.log(item, "item");
				this.$refs.diaBoxRef1.show = true
				this.curItem = item
			},
			async getData(type) {
				let filterType = type
				if (!type) {
					filterType = 0
				}
				const res = await joinMyPkListApi(this.id, filterType)

				if (res.code == 200) {
					this.userList = res.data
					console.log(res.data, "dasda");
					res.data.forEach(item => {
						this.totalPrice += item.actualPayAmount
					})
				}
				this.activeBtn = type
			},
			handleJoin() {
				console.log("加入")
			}
		},

	}
</script>

<style lang="scss" scoped>
	.bgCont2 {
		margin-top: 180rpx !important;
	}

	.topBtn {
		margin-bottom: 30rpx;
		margin-top: 150rpx;
	}

	.pic2 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		image {
			width: 100%;
			height: 78vh;
		}
	}

	.pic3 {
		image {
			height: 629rpx !important;
		}
	}


	.numberBtn {
		position: absolute;
		top: 90rpx;
		left: 90rpx;
		z-index: 99;
		font-weight: 400;
		font-size: 51rpx;
		text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
	}

	.check {
		position: absolute;
		right: 78rpx;
		top: 40rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
		padding: 20rpx 50rpx;
	}

	.pic {
		width: 100%;
		position: absolute;
		top: 0;

		image {
			position: relative;
			width: 114%;
			top: 0;
			left: -41rpx;
			z-index: -1;
			height: 800rpx;
		}
	}

	.bgCont {
		position: relative;
		background: rgba(0, 0, 0, 0);
		border-radius: 60rpx;
		padding: 50rpx;
		margin-top: 300rpx;
	}

	.changeColor {
		::v-deep .diaBox {
			width: 85vw !important;
			backdrop-filter: none !important;
			border: none !important;
			background: rgba(0, 0, 0, 0) !important;
			background-size: 100% 100%;
			padding: 0 !important;
		}
	}



	.info-row {
		font-size: 28rpx;
		color: #c7cad0;

		.status {
			// color: #fff !important;
		}
	}


	.text-box {
		padding: 20rpx 0;
		border-top: 2rpx solid #4b585d;
		border-bottom: 2rpx solid #4b585d;
		margin-top: 20rpx;
		color: #fff;
	}

	.row2 {
		margin-top: 20rpx;
	}

	/* 信息行通用样式 */
	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff
	}

	.row1 {
		margin-bottom: 20rpx;
	}

	/* 用户信息行 */
	.user-info {
		display: flex;
		align-items: center;
		gap: 8px;
		color: #fff;

		image {
			width: 30rpx;
		}

		.tag {
			width: 76rpx;
			height: 40rpx;
			background: #0FC6C2;
			border-radius: 14rpx;
			font-size: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.btns3 {
		justify-content: center !important;
		margin-top: 40rpx;

		.btnOut:nth-child(1) {
			margin-right: 40rpx;
		}
	}

	.btns {

		.btnOut4 {
			border-radius: 64rpx;
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(71, 136, 247, 0.25);

			.btn {
				background: #4788f7 !important;
			}
		}



		.btnOut3 {
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(249, 118, 9, 0.25);

			.btn {
				background: #f97609;
			}
		}

		.btnOut5 {
			.btn {
				background: #4c5c65 !important;
			}
		}
	}

	.btns2 {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.btnOut {
			border-radius: 64rpx;
			height: 65rpx;

			.btn {
				box-shadow: inset 0rpx 12rpx 50rpx 0rpx #FFFFFF;
				background: linear-gradient(291deg, #0FC6C2 0%, #BEFF02 100%), radial-gradient(104% 104% at 94% 121%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(135% 135% at 5% 15%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
			}
		}

		.btn {
			width: 140rpx;
			font-weight: 600;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 65rpx;
			text-align: center;
			border-radius: 64rpx;
		}
	}

	.price {
		text-align: center;
		font-size: 40rpx;
		font-weight: bolder;
		color: #fff;
	}

	.text-item {
		color: #fff;
		margin-top: 10rpx;
	}

	.btns {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;

		.btnOut {
			flex: 1;
			border-radius: 64rpx;
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(195, 200, 203, 0.25);
			margin-right: 50rpx;
			height: 85rpx;

			&:last-child {
				margin-right: 0;
			}
		}

		.btnOut2 {
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);

			.btn {
				background: #2cb3af;
			}
		}

		.btn {
			width: 100%;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 85rpx;
			text-align: center;
			border-radius: 64rpx;
			box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;

		}
	}

	.users {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		align-content: flex-start;
		justify-items: center;
		margin-top: 50px;
		height: 55vh;
		overflow-y: scroll;
		gap: 20rpx;

		.user {
			margin-bottom: 50px;
			position: relative;

			image {
				border: 8rpx solid #fff;
				width: 170rpx;
				height: 170rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.state {
				position: absolute;
				bottom: 0;
				width: 140rpx;
				height: 56rpx;
				background: #FF9A2E;
				border-radius: 20rpx;
				left: 50%;
				transform: translateX(-50%) translateY(50%);
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}

			.name {
				color: #fff;
				position: absolute;
				bottom: -80rpx;
				left: 50%;
				white-space: nowrap;
				transform: translateX(-50%);
				font-size: 30rpx;
			}

			.color2 {
				background-color: #3491FA;
			}

			.color3 {
				background-color: #0FC6C2;
			}

			.color5 {
				background-color: #d31500;
			}

			.color6 {
				background-color: #c9c703;
			}

			.color7 {
				background-color: #d500ba;
			}
		}
	}

	.btns {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;

		.btnOut {
			flex: 1;
			border-radius: 64rpx;
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(195, 200, 203, 0.25);
			margin-right: 50rpx;
			height: 90rpx;

			&:last-child {
				margin-right: 0;
			}

			.btn {
				background-color: #B3B4C3;
			}
		}

		.btnOut2 {
			box-shadow: inset 0rpx 12rpx 50rpx 0rpx #FFFFFF;

			.btn {
				background: linear-gradient(291deg, #0FC6C2 0%, #BEFF02 100%), radial-gradient(104% 104% at 94% 121%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(135% 135% at 5% 15%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
			}
		}

		.btn {
			width: 100%;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
			border-radius: 64rpx;
			// box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
		}
	}

	.login-container {
		width: 100%;
		height: 466rpx;
		padding: 20rpx 30rpx;
		border-radius: 12rpx 12rpx 0 0;
		background-size: 100% 100%;
		position: fixed;
		bottom: 0;
		left: 0;

		.login-top {
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 71rpx;
				margin-bottom: 32rpx;
			}
		}

		.name {
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
			text-align: center;
		}

		button {
			margin-bottom: 10rpx;
			height: 90rpx;
			background: linear-gradient(267deg, #CC34B3 0%, #541A66 100%);
			border-radius: 200rpx 200rpx 200rpx 200rpx;
		}

		/deep/ .u-icon__icon {
			top: -7rpx !important;
		}

		/deep/ .u-iconfont {
			top: -7rpx !important;
		}

		.noBtn {
			margin-left: 30rpx;
		}
	}

	.content {
		padding: 32rpx;
		position: relative;
	}

	.left-slot {
		color: #fff;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}
</style>